<template>
  <div class="seal-pipeline-content">
    <div class="filter-form" style="margin:12px 0;">
      <FilterInput v-if="!showMobilePage" v-model="paramsObj" :filter-list="filterList" line-feed show-search-btn @handelClick="getData(true)" @queryEmpty="queryEmpty" />
      <div v-if="!showMobilePage" class="export-wrap flex-center">
        <topRightAmount :total-tax-amount="list.otherData && list.otherData.totalTaxAmount" title="收入金额" />
        <export-button
          ref="pipelineExportRef"
          :export-api="'/admin/review/pipelineList/export'"
          :export-name="'封账流水'"
          is-before-export
          class="btn-right-item"
          is-diy
          style="padding: 0"
          @beforeExport="exportBeforeExport('pipelineExportRef')"
          @onComplate="exportComplete">
          <el-button
            :disabled="exportLoading"
            :loading="exportLoading"
            class="export-btn"
            size="small"
            type="primary"
            plain>导出</el-button>
        </export-button>
      </div>
      <div v-else class="export-wrap flex-center mobile-export-wrap">
        <topRightAmount :total-tax-amount="list.otherData && list.otherData.totalTaxAmount" title="收入金额" />
        <div class="btn-wrap">
          <FilterInput v-model="paramsObj" :filter-list="filterList" :show-text="false" show-mobile-icon show-search-btn @handelClick="getData(true)" @queryEmpty="queryEmpty" />
          <export-button
            ref="pipelineExportRef"
            :export-api="'/admin/review/pipelineList/export'"
            :export-name="'封账流水'"
            is-before-export
            class="btn-right-item"
            is-diy
            style="padding: 0"
            @beforeExport="exportBeforeExport('pipelineExportRef')"
            @onComplate="exportComplete">
            <img :src="exportImg" class="export-icon" alt="export" >
          </export-button>
        </div>
      </div>
    </div>
    <div class="seal-pipeline-table">
      <el-table
        v-loading="listLoading"
        ref="pipelineTableRef"
        :data="list.items"
        :header-cell-style="{fontSize: '14px',color: '#141C3D'}"
        :row-class-name="(data) => tableRowClassName(data)"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        fit
        hightlight-current-row
        class="fb-table"
        header-cell-class-name="order-data-header-cell"
        @sort-change="sortMethod"
        @select="selectTable"
        @select-all="selectTable"
        @selection-change="handleSelectionChange">
        <el-table-column
          v-if="!isReport"
          align="left"
          type="selection"
          width="55"
        />
        <el-table-column align="left" label="流水单号" min-width="200">
          <template slot-scope="scope">
            <ToolTip v-if="scope.row.flowNumber" :content="scope.row.flowNumber" is-can-click @handelClick="toCheck(scope)" />
            <span v-else style="color:#406EFF;cursor:pointer;" @click="toCheck(scope)">--</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="到账日期" width="108" min-width="108" prop="arrivalTime" sortable="custom">
          <template slot-scope="scope">
            {{ standardFormatNoHour(scope.row.arrivalTime, 'YYYY/MM/DD') }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="收入金额(元)" width="140" min-width="120" prop="income" sortable="custom">
          <template slot-scope="scope">
            <PriceColumn :real-val="scope.row.income" :price="scope.row.income / 100" />
          </template>
        </el-table-column>
        <el-table-column align="right" label="核销金额(元)" width="140" min-width="120" prop="incomeAmount" sortable="custom">
          <template slot-scope="scope">
            <PriceColumn :real-val="scope.row.incomeAmount" :price="scope.row.incomeAmount / 100" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="付款人名称" min-width="112" width="112">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.payName"/>
          </template>
        </el-table-column>
        <el-table-column align="left" label="付款账号" width="100" min-width="100">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.payNumber"/>
          </template>
        </el-table-column>
        <el-table-column align="left" label="付款方式" width="80" min-width="80">
          <template slot-scope="scope">
            <el-tooltip v-if="(scope.row.clientType && scope.row.payWayStr) || (scope.row.clientType === 0 && scope.row.payWayStr)" class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.clientType | clientStatusFilter }} <span v-if="scope.row.payWayStr">/ {{ scope.row.payWayStr }}</span></div>
              <div class="ellipsis">{{ scope.row.clientType | clientStatusFilter }} <span v-if="scope.row.payWayStr">/ {{ scope.row.payWayStr }}</span></div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="left" label="核销状态" width="90" min-width="90">
          <template slot-scope="scope">{{ scope.row.verificationState | setVerificationState }}</template>
        </el-table-column>
        <el-table-column align="left" label="封账状态" width="90" min-width="90">
          <template slot-scope="scope">
            <div class="dot-wrap">
              <span :style="{backgroundColor: scope.row.sealingState ? '#999':'#406EFF'}" class="dot"/>
              {{ scope.row.sealingState | setSealBillType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!isRecheck" align="center" label="审批状态" width="98">
          <template slot-scope="scope">
            <div v-if="scope.row.reviewState || scope.row.reviewState === 0" class="dot-wrap">
              <span :style="{backgroundColor: getColor(scope.row.reviewState)}" class="dot"/>
              {{ scope.row.reviewState | setSealReviewState }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="创建人" width="80" min-width="80">
          <template slot-scope="scope">{{ scope.row.createName || '--' }}</template>
        </el-table-column>
        <el-table-column align="left" label="创建时间" width="160" min-width="150" prop="createTime" sortable="custom">
          <template slot-scope="scope">
            <div class="ellipsis">{{ scope.row.createTime | standardFormat('YYYY/MM/DD HH:mm') }}</div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="备注" min-width="87" width="140">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.remark"/>
          </template>
        </el-table-column>
        <el-table-column :width="showMobilePage ? 50 : (isRecheck?220 : 90)" align="left" label="操作" fixed="right">
          <template slot-scope="scope">
            <div class="review-setting-btn">
              <reviewColumn :is-recheck="isRecheck" :is-report="isReport" :item="scope.row" :sealing-id="sealingId" :column-type="'pipeline'" @freshData="getData" />
              <!-- <el-button v-else style="margin-right:5px;" type="text" size="small" @click="toCheck(scope)">查看</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <fixed-pagination v-show="list.total > 0" :class="{'position-b56': !showMobilePage, 'position-b49': showMobilePage}" class="center">
        <div style="flex:1;display:flex;">
          <tableFooterBtn
            v-if="!isReport"
            ref="tableFooterBtn"
            :select-data="multipleSelection"
            :sealing-id="sealingId"
            :process-state="processState"
            :multiple-selection-all="multipleSelectionAll"
            column-type="pipeline"
            @clearMixinSelection="clearMixinSelection"
            @queryClick="queryClick"
            @refreshData="refreshData" />
        </div>
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="showMobilePage ? pageLayout : 'total, prev, pager, next, sizes'"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </fixed-pagination>
    </div>
  </div>
</template>
<script>
import { getSealPipelineList } from '@/api/sealingAccount';
import { standardFormatNoHour, standardFormat } from '@/filters/date';
import clearPng from '@/assets/medium/clear.png';
import { colorList } from '../orderTable/colorData';

import reviewColumn from '../reviewColumn';
import tableFooterBtn from '../tableFooterBtn';
import ExportButton from '@/components/ExportButton';
import topRightAmount from '../topRightAmount';
import { PROCESS_STATE } from '@/utils/const/sealing';
import { verificationOptions } from '@/views/project/model/selectData';

import SealingMixins from '@/components/Finance/mixins/sealing';
import tableSelections from '@/mixins/tableSelections';
import paramsDateFormat from '@/mixins/paramsDateFormat';
import mobileTable from '@/mixins/mobileTable';
import {
  setSealReviewState,
  setVerificationState,
  setSealBillType,
  clientStatusFilter
} from '@/filters/status';
import exportImg from '@/assets/export.png';
export default {
  components: {
    reviewColumn,
    tableFooterBtn,
    topRightAmount,
    ExportButton },
  filters: {
    setVerificationState,
    setSealBillType,
    standardFormat,
    clientStatusFilter,
    setSealReviewState
  },
  mixins: [SealingMixins, paramsDateFormat, tableSelections, mobileTable],
  props: {
    sealingId: {
      type: Number,
      default: null
    },
    isReport: {
      type: Boolean,
      default: false
    },
    // true：复审，false：初审
    isRecheck: {
      type: Boolean,
      default: false
    },
    processState: {
      type: Number | String,
      default: PROCESS_STATE.REVIEW
    }
  },
  data() {
    return {
      clearPng, colorList,
      exportImg,
      listLoading: false,
      paramsObj: {},
      filterList: [
        { keyword: 'clientName', name: '付款人名称', type: 'input' },
        { keyword: 'payName', name: '付款账号', type: 'input' },
        { keyword: 'verificationState', name: '核销状态', type: 'select', options: verificationOptions
        },
        { keyword: 'reviewState', name: '审批状态', type: 'select', options: [
          { value: 0, label: '待审批' },
          { value: 1, label: '已通过' }, { value: 2, label: '未过审' }]
        },
        { keyword: 'arrivalTime', name: '到账日期', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'createTime', name: '创建时间', timeType: 'daterange', type: 'rangeDate' }
      ],
      filterForm: {
        listKey: 'clientName',
        listContent: '',
        timeType: 1,
        verificationState: null,
        dateTime: null,
        currentMonth: -1
      },
      multipleSelection: [],
      filterData: {},
      sortType: '',
      sortName: '',
      page: 1,
      perPage: 20,
      tableRefName: 'pipelineTableRef',
      list: {},
      dateDataAttrName: [
        {
          attr: 'createTime',
          start: 'createStartTime',
          end: 'createEndTime',
          endType: 1
        },
        {
          attr: 'arrivalTime',
          start: 'arrivalStartTime',
          end: 'arrivalEndTime',
          endType: 1
        }
      ]
    };
  },
  methods: {
    standardFormatNoHour,
    // 流水列表
    getData(reset) {
      if (reset) this.page = 1;
      const params = this.formatParams();
      if (this.isBatchAll) params.returnIds = true;
      this.listLoading = true;
      getSealPipelineList(params, this.sealingId).then(res => {
        if (this.isBatchAll) {
          // 批量操作事件 先根据条件搜索出对应的id数组，再将id集合传送给操作接口
          this.operateHandle(this.requestType, res);
        } else {
          this.listLoading = false;
          this.list = res.data;
        }
        this.isBatchAll = false;
        this.setSelectRow && this.setSelectRow(res.data.items);
      }).catch(err => {
        this.isBatchAll = false;
        this.listLoading = false;
        console.error(err);
      });
    },
    // 多选
    tableSelectionChange(e) {
      this.ids = e.map(item => item.id).join(',');
    },
    toCheck(scope) {
      const routeUrl = this.$router.resolve({
        name: 'chargeOffDetail',
        params: { chargeOffId: scope.row.id },
        query: { sealingId: this.sealingId }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/styles/placeholder.scss';
.dot-wrap {
  @extend %dot-wrap;
}
.seal-pipeline-content {
  .seal-pipeline-table {
    .el-table {
      color: #999 !important;
      .review-state {
        width: 88px;
        height: 26px;
        border-radius: 16px;
        text-align: center;
        line-height: 26px;
        margin: 0 auto;
        .icon-class {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
}
.review-setting-btn {
  display:flex;
  align-items: center;
}
@import '@/styles/placeholder.scss';
.export-wrap {
  @extend %sealing-export-btn;
}
.el-table {
  &::v-deep {
    th .el-checkbox {
      margin: 0 4px;
    }
  }
}
</style>
